<template>
  <div>
    <el-dialog
      :title="title"
      v-if="visible"
      :visible.sync="visible"
      width="960px"
      append-to-body="true"
    >
      <el-form ref="form" :model="formdata" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="组织名称" prop="name">
              <el-input
                placeholder="请输入组织名称"
                v-model="formdata.name"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属组织" prop="parentId">
              <treeselect
                v-model="formdata.parentId"
                :options="treeData"
                :show-count="true"
                :normalizer="normalizer"
                placeholder="请选择所属组织"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="nickName">
              <el-badge
                :value="sendUserIds.length"
                :hidden="!sendUserIds.length"
                :type="'primary'"
              >
                <el-button size="small" @click="selectUserBtn">选择</el-button>
              </el-badge>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成立时间" prop="buildTime">
              <el-date-picker
                v-model="formdata.buildTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="组织简介" prop="introduction">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入组织简介"
                v-model="formdata.introduction"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>
    <selectCounselors
      ref="selectUserRef" :isCommittee="isCommittee" :isStudentClub="isStudentClub" 
      :sendUserIds.sync="sendUserIds"
    ></selectCounselors>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import selectCounselors from "./selectCounselors.vue";
import {
  addOrganize,
  putOrganize,
  addStudentOrganize,
  editStudentOrganize,
} from "@/api/leagueManagement/organize";
export default {
  name: "organizationAddDlg",
  components: {
    selectCounselors,
    Treeselect,
  },
  props: {
    treeData: {
      type: Array,
      default: [],
    },
    isCommittee: {
      type: Boolean,
      default: false,
    },
    isStudentClub: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "",
      visible: false,
      formdata: {},
      sendUserIds: [],
      rules: {
        name: [{ required: true, message: "请输入组织名称", trigger: "blur" }],
        parentId: [
          { required: true, message: "请选择所属组织", trigger: "change" },
        ],
      },
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.childList,
        };
      },
    };
  },
  methods: {
    open (data, type) {
            console.log(data)
            this.type = type
            if (type == 'add') {
                this.title = "添加"

            } else if (type == 'edit') {
                this.title = "修改"
                this.formdata = {
                    ...data
                }
              if(this.isCommittee){
        this.sendUserIds = this.formdata.headTeaList
      }else {
        this.sendUserIds = this.formdata.headStuList
      }
            }
            this.visible = true
        },
    // open(rowdata = {}) {
    //   this.visible = true;
    //   // console.log(this.isCommittee,rowdata,'ddd')

    //   this.formdata = { ...rowdata };
    //     // this.sendUserIds = this.formdata.headTeaList

    //   // if(this.isCommittee){
    //   //   this.sendUserIds = this.formdata.headTeaList
    //   // }else {
    //   //   this.sendUserIds = this.formdata.headStuList
    //   // }
    // },
    selectUserBtn() {
      this.$refs.selectUserRef.open();
    },
    submitForm: function () {
      if (this.sendUserIds.length > 0) {
        if(this.isCommittee) {
          this.formdata.headTeaList = this.sendUserIds.map((item) => {
          return {
            orgId: this.formdata.parentId,
            userId: item["id"],
            userName: item["name"],
            userType: '01',
          };
        });
        }else{
          this.formdata.headStuList = this.sendUserIds.map((item) => {
          return {
            unionId: this.formdata.parentId,
            userId: item["id"],
            userName: item["name"],
            userType: '02',
          };
        });
        }
        
      }
      console.log(this.formdata, this.sendUserIds, "tijaio");
      this.$refs["form"].validate(valid => {
          if (valid) {
              if (this.formdata.id != undefined) {
                  if (this.isCommittee) {
                      putOrganize(this.formdata).then(response => {
                          this.$modal.msgSuccess("修改成功");
                          this.visible = false;
                          this.$emit('updateList');
                      });
                  }
                  if (this.isStudentClub) {
                      editStudentOrganize(this.formdata).then(response => {
                          this.$modal.msgSuccess("修改成功");
                          this.visible = false;
                          this.$emit('updateList');
                      });
                  }

              } else {
                  if (this.isCommittee) {
                      addOrganize(this.formdata).then(response => {
                          this.$modal.msgSuccess("新增成功");
                          this.visible = false;
                          this.$emit('updateList');
                      });
                  }
                  if (this.isStudentClub) {
                      addStudentOrganize(this.formdata).then(response => {
                          this.$modal.msgSuccess("新增成功");
                          this.visible = false;
                          this.$emit('updateList');
                      });
                  }

              }
          }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>